import React,{useEffect} from 'react'
// 引入组件
import SideMenu from '../../components/SideMenu/SideMenu'
import TopHeader from '../../components/TopHeader/TopHeader'
// 引入配置项目路由的组件
import NewsRouter from '../../components/NewsRouter'
// 引入组件样式
import './NewsSandBox.css'
// 引入 antd 组件库组件
import { Layout } from 'antd'
// 下面这个包可以实现路由切换时，显示进度条，使用前需要执行 npm i npropress 指令安装
import NProgress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
// 将 Content 组件从 Layout 组件中解构出来
const { Content } = Layout

export default function NewsSandBox() {
  // 当前这个组件中有路由组件，当前路由变化的时候，路由组件重新匹配，这个组件就会重新渲染，就会利用下面代码开启进度条
  // 开启进度条
  NProgress.start()
  // 因为 useEffect 钩子是当组件渲染完毕的时候执行
  useEffect(()=>{
    // 所以在组件渲染完毕的时候，利用下面代码终止进度条
    NProgress.done()
  })
  return (
    <Layout>
      {/* 侧边栏 */}
      <SideMenu></SideMenu>
      <Layout className="site-layout">
        {/* 顶部栏 */}
        <TopHeader></TopHeader>

        {/* 中间内容展示区 */}
        <Content 
          className="site-layout-background" 
          style={{ 
            margin: '24px 16px', 
            padding: 24, 
            minHeight: 360, 
            overflow: "auto"
          }}
        >
          <NewsRouter/>
        </Content>
      </Layout>
    </Layout>
  )
}
